
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户注册 - 跳转示例</title>
   <link rel="stylesheet" href="../css/注册.css">
</head>
<body>
  
  <div class="container">
    <h1>用户注册</h1>
    <form id="registerForm">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" placeholder="请输入用户名" required>
        <div class="error-message" id="usernameError">用户名不能为空</div>
      </div>
      
      <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" id="email" placeholder="请输入邮箱" required>
        <div class="error-message" id="emailError">请输入有效的邮箱地址</div>
      </div>
      
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" placeholder="请输入密码" minlength="6" required>
        <div class="error-message" id="passwordError">密码至少6位</div>
      </div>
      
      <button type="button" id="registerBtn" class="btn">注册</button>
    </form>
    
    <div class="link-group">
      已有账号？<a href="login.html" id="goToLogin" >点击登录</a>
    </div>
    <div class="logo">
      <img scr="heart-icon.png" alt="心形图标">智慧养老平台
      </div>
  </div>

  <script>
    // 注册按钮点击事件
    document.getElementById('registerBtn').addEventListener('click', function() {
      let isValid = true;
      
      // 验证用户名
      const username = document.getElementById('username').value.trim();
      const usernameError = document.getElementById('usernameError');
      if (!username) {
        usernameError.style.display = 'block';
        isValid = false;
      } else {
        usernameError.style.display = 'none';
      }
      
      // 验证邮箱
      const email = document.getElementById('email').value.trim();
      const emailError = document.getElementById('emailError');
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!email ||!emailRegex.test(email)) {
        emailError.style.display = 'block';
        isValid = false;
      } else {
        emailError.style.display = 'none';
      }
      
      // 验证密码
      const password = document.getElementById('password').value;
      const passwordError = document.getElementById('passwordError');
      if (password.length < 6) {
        passwordError.style.display = 'block';
        isValid = false;
      } else {
        passwordError.style.display = 'none';
      }
      
      // 如果验证通过，模拟注册成功并跳转
      if (isValid) {
        alert('注册成功！即将跳转到登录页面');
        // 这里模拟注册成功后跳转，实际项目中可能需要等待后端响应
        setTimeout(() => {
          window.location.href = '登录页面.html';
        }, 1000);
      }
    });
    
    // 直接跳转登录页按钮事件
    document.getElementById('goToLogin').addEventListener('click', function() {
      window.location.href = '登录页面.html';
    });
  </script>
</body>
</html>
